<template>
  <div>
    <div ref="tabbar" class="tabbar" v-if="from ==''">
      <van-tabbar v-model="active" :active-color="variables.theme" :fixed="false" route>
        <van-tabbar-item :to="{name: 'Home'}" icon="wap-home">首页</van-tabbar-item>
        <!-- <van-tabbar-item :to="{name: 'Snapped'}" icon="peer-pay" v-if="userInfo.userLevel!=0">采购</van-tabbar-item> -->
        <van-tabbar-item :to="{name: 'Snapped'}" icon="peer-pay">折扣商城</van-tabbar-item>

        <!--        <van-tabbar-item :to="{name: 'Category'}" icon="bars">分类</van-tabbar-item>-->
        <van-tabbar-item :to="{name: 'Cart'}" icon="shopping-cart" :badge="count==0? '':count">购物车</van-tabbar-item>
        <van-tabbar-item :to="{name: 'User'}" icon="manager">我的</van-tabbar-item>
      </van-tabbar>
    </div>
    <div class="tabbar--placeholder" style="width:100%;height:50px" />
  </div>
</template>

<script>
import variables from '@/styles/variables.scss'
import { getCartGoodsCount } from '@/api/cart'
import { mapGetters } from 'vuex'

export default {
  props:{
    isRefresh:{
      type: Boolean,
      default:false
    }
  },
  data() {
    return {
      count: 0,
      active: this.$store.getters.active,
      refresh:sessionStorage.getItem('refresh') || false,
      totalCartNum:'',
      from:sessionStorage.getItem('from') || ''
    }
  },
  computed: {
    // ...mapGetters(['userInfo','cartCount']),
    ...mapGetters(['cartCount']),

    variables() {
      return variables
    },
    // totalCartNum() {
    //   if (this.count === 0) {
    //     return ''
    //   } else {
    //     return this.count <= 99 ? this.count : 99
    //   }
    // }
  },
  watch: {
    active: {
      handler(n, o) {
        this.active = n
        console.log('watch:' + n + ' ' + o)
      }
    },
    cartCount:{
      handler:function(newVal) {
        console.log('cartCount=',newVal)
        this.count =newVal
        // if(newVal){
        //   this.getCartGoodsCount()
        // }
      },
      deep: true,
      immediate: true
    },
    
  },
  mounted() {
    console.log('isRefresh==', this.isRefresh)
    this.getCartGoodsCount()
  },
  methods: {
    getCartGoodsCount() {
      getCartGoodsCount().then(res => {
        const { count } = res.map
        this.count = count
        sessionStorage.setItem('refresh',false)
      }).catch(e => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.tabbar {
  width: 100vw;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 2px solid #f5f5f5;
}
</style>
